<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3D - 立方体</title>
    <style>
        .view{
            width: 200px;
            height: 200px;
            margin: 50px auto;
        }
        .container{
            transform-style: preserve-3d;
            transform-origin: 100px 100px;
            perspective-origin: center;
            animation-name: animation;
            animation-timing-function: ease-in-out;
            animation-iteration-count: infinite;
            animation-duration: 10s;
        }

        .box{
            width: 200px;
            height: 200px;
            line-height: 200px;
            text-align: center;
            font-size: 120px;
            color: white;
            border: 5px solid #666;
            background: hsla( 40, 100%, 50%, 0.7);
            position: absolute;
        }
        .box:nth-child(1){
            transform: translateZ(100px);
        }
        .box:nth-child(2){
            transform: translateZ(-100px);
        }
        .box:nth-child(3){
            transform: rotateX(90deg) translateZ(100px);
        }
        .box:nth-child(4){
            transform: rotateX(-90deg) translateZ(100px)
        }
        .box:nth-child(5){
            transform: rotateY(90deg) translateZ(-100px);
        }
        .box:nth-child(6){
            transform: rotateY(-90deg) translateZ(-100px);
        }
        @keyframes animation {
            16%{transform: rotateY(-90deg)}
            33%{transform: rotateY(-90deg) rotateZ(135deg)}
            50%{transform: rotateY(225deg) rotateZ(135deg)}
            66%{transform: rotateY(135deg) rotateZ(135deg)}
            83%{transform: rotateX(135deg)}
        }
    </style>
</head>
<body>

    <div class="view">
        <div class="container">
            <div class="box">A</div>
            <div class="box">B</div>
            <div class="box">C</div>
            <div class="box">D</div>
            <div class="box">E</div>
            <div class="box">F</div>
        </div>
    </div>

</body>
</html>